import { ReactNode } from 'react'
import { ConfigProvider } from 'antd'

import { SCROLL_BOX_ID } from './utils'
import fbabeeLogo from '@/assets/fbabeeLogo.svg'
import styles from './styles.module.less'

export const Wrap = ({ children }: { children?: ReactNode }) => {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#f39433',
          colorLink: '#f39433',
        },
        cssVar: { key: 'FBA_Track' },
        hashed: false,
      }}
    >
      <div className={`${styles.wrap} FBA_Track`} id={SCROLL_BOX_ID}>
        <div className={styles.wrap_inner}>{children}</div>
      </div>
    </ConfigProvider>
  )
}

export const Header = ({ right }: { right?: ReactNode }) => {
  return (
    <div className={styles.header}>
      <div className={styles.header_inner}>
        <div className={styles.header_inner_left}>
          <a target="_blank" rel="noreferrer" href="https://fbabee.com/">
            <img width={200} src={fbabeeLogo} />
          </a>
        </div>
        {!!right && <div className={styles.header_inner_right}>{right}</div>}
      </div>
    </div>
  )
}
